<script setup>
import { inject, computed } from 'vue'

const props = defineProps({
  role: Object,
  welcomeText: String,
  exampleText: String,
})

const questions = computed(() => props.exampleText?.split('\n').filter((item) => item !== ''))

//从父组件获取发送问题的方法
const sendPromptSample = inject('sendPromptSample')
const newQuestion = (question) => {
  sendPromptSample(question)
}
</script>

<template>
  <div class="bubble">
    <div class="flex justify-start">
      <div class="flex space-x-1 max-w-[32rem]">
        <img :src="role.assistant.avatar" class="w-10 h-10 rounded flex-none" />
        <div class="message flex-1">
          <div class="">{{ props.welcomeText }}</div>
          <ul class="questions" v-if="questions?.length">
            <li class="question" v-for="item in questions" @click="newQuestion(item)">
              <span>{{ item }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bubble {
  @apply mt-2;
}

.bubble :deep(.message) {
  @apply inline-block p-3 rounded bg-[--el-bg-color] text-[--el-text-color-regular]
  space-y-2 w-full border border-[--el-border-color];
}

.bubble :deep(.questions) {
  @apply space-y-2;
}

.bubble :deep(.questions li) {
  @apply min-w-64 p-2 rounded flex items-center justify-between space-x-1
  bg-[--el-fill-color-light] hover:bg-[--el-fill-color] cursor-pointer;
}
</style>
